<template>
    <el-tabs v-model="tabsCurrent" @tab-click="handleClick">
        <el-tab-pane label="客户旅程" name="first">
            <ClientHistoryHanle v-if="tabsCurrent == 'first'" :clientInfo="clientInfo" style="overflow: auto;height: 100vh;"/>
        </el-tab-pane>

<!--        <el-tab-pane label="订单" name="second">
            <ClientOrder v-if="tabsCurrent == 'second'" :clientInfo="clientInfo" style="overflow: auto;height: 100vh;"/>
        </el-tab-pane>-->

        <el-tab-pane label="客户文件" name="third">
            <ClientFiles v-if="tabsCurrent == 'third'" :clientInfo="clientInfo" style="overflow: auto;height: 100vh;"/>
        </el-tab-pane>

        <el-tab-pane label="合同" name="fourth">
            <ClientContract v-if="tabsCurrent == 'fourth'" :clientInfo="clientInfo" style="overflow: auto;height: 100vh;"/>
        </el-tab-pane>

<!--        <el-tab-pane label="工单" name="fifth">
            <ClientWorkOrder v-if="tabsCurrent == 'fifth'" :clientInfo="clientInfo" style="overflow: auto;height: 100vh;"/>
        </el-tab-pane>-->

        <el-tab-pane label="待办列表" name="sixth">
            <ClientTask v-if="tabsCurrent == 'sixth'" :clientInfo="clientInfo" style="overflow: auto;height: 100vh;"/>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import ClientHistoryHanle from "@/views/customer/client/client_history";
import ClientOrder from "@/views/customer/client/client_order";
import ClientFiles from "@/views/customer/client/client_files";
import ClientContract from "@/views/customer/client/client_contract";
import ClientWorkOrder from "@/views/customer/client/client_work_order";
import ClientTask from "@/views/customer/client/client_task";

export default {
    name: "clientAbout",
    components: {
        ClientHistoryHanle,
        ClientOrder,
        ClientFiles,
        ClientContract,
        ClientWorkOrder,
        ClientTask
    },
    props: {
        clientInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            tabsCurrent: 'first'
        }
    },
    methods: {
        handleClick(tab, event) {
            this.tabsCurrent = tab.name
        }
    }
}
</script>

<style scoped>
</style>
